<!-- tianditu4490.html -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

    <title>Demo For WMTS(天地图) JS API 4.3</title>

    <style type="text/css">
        html, body {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        .mapContainer {
            width: 100%;
            height: 100%;
        }
    </style>

    <!--<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/4.3/esri/css/main.css">-->
    <!--<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/4.3/dijit/themes/soria/soria.css">-->
    <!--    <script type="text/javascript" src="https://js.arcgis.com/4.3/"></script>-->
    <!--<script src="https://js.arcgis.com/4.13/"></script>-->
<!--    <script src="http://192.168.2.145/arcgis_js_api/library/4.13/init.js"></script>-->

    <link rel="stylesheet"
          href="http://192.168.11.38/arcgis_js_v411_api/arcgis_js_api/library/4.11/esri/themes/light/main.css"/>
    <script src="http://192.168.11.38/arcgis_js_v411_api/arcgis_js_api/library/4.11/init.js"></script>

</head>
<body class="soria">
<button onclick="hideLayer(false)">隐藏图层</button>
<button onclick="hideLayer(true)">显示图层</button>
<div id="map" class="mapContainer">
</div>

<script type="text/javascript">
    function getQueryString(url, name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = url.match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

    function getTDTUrl(esriRequest, _url) {
        return esriRequest(_url, {responseType: "xml"}).then(function (response) {
            const rootNode = response.data;
            //由于经过代理，这里不解析xml中网址指向的url前缀
            let urlTemplate = _url.replace("GetCapabilities", "GetTile");
            const format = rootNode.getElementsByTagName("Format")[0].innerHTML;
            const layer = rootNode.getElementsByTagName("Layer")[0].getElementsByTagName("ows:Identifier")[0].innerHTML;
            const TileMatrixSet = rootNode.getElementsByTagName("TileMatrixSetLink")[0].getElementsByTagName("TileMatrixSet")[0].innerHTML;
            const style = rootNode.getElementsByTagName("Layer")[0].getElementsByTagName("Style")[0].getElementsByTagName("ows:Identifier")[0].innerHTML || "default";
            urlTemplate += `&layer=${layer}&style=${style}&format=${format}&TileMatrixSet=${TileMatrixSet}&TileMatrix={level}&TileRow={row}&TileCol={col}`;
            return urlTemplate;
        }).catch(error => {
            console.log("解析失败", error);
            return error;
        });
    }

    require(["esri/request", "esri/Color", "dojo/dom",
            "dojo/on",
            "dojo/_base/declare",
            "dojo/json",
            "dojo/_base/lang",
            "dojo/_base/url",
            "dojo/string",
            "dojo/dom-construct",
            "dojo/number",
            "esri/Map",
            "esri/geometry/Extent",
            "esri/layers/support/TileInfo",
            "esri/layers/support/LOD",
            "esri/geometry/SpatialReference",
            "esri/geometry/Point",
            "esri/views/MapView",
            "esri/views/SceneView",
            "esri/layers/WebTileLayer",
            "esri/layers/TileLayer",
            "esri/layers/MapImageLayer",
            "esri/core/urlUtils",
            "esri/core/JSONSupport",
            "esri/config",
            "esri/request",
            "dojo/domReady!"
        ],
        function (esriRequest, Color, dom, on, declare, JSON, lang, url, string, domConstruct, number,
                  Map, Extent, TileInfo, LOD, SpatialReference, Point,
                  MapView, SceneView, WebTileLayer, TileLayer, MapImageLayer, urlUtils, JSONSupport, esriConfig, esriRequest) {

            var tileInfo = new TileInfo({
                dpi: 90.71428571427429,
                rows: 256,
                cols: 256,
                compressionQuality: 0,
                origin: {
                    x: -180,
                    y: 90
                },
                spatialReference: {
                    wkid: 4490
                },
                lods: [
                    {level: 2, levelValue: 2, resolution: 0.3515625, scale: 147748796.52937502},
                    {level: 3, levelValue: 3, resolution: 0.17578125, scale: 73874398.264687508},
                    {level: 4, levelValue: 4, resolution: 0.087890625, scale: 36937199.132343754},
                    {level: 5, levelValue: 5, resolution: 0.0439453125, scale: 18468599.566171877},
                    {level: 6, levelValue: 6, resolution: 0.02197265625, scale: 9234299.7830859385},
                    {level: 7, levelValue: 7, resolution: 0.010986328125, scale: 4617149.8915429693},
                    {level: 8, levelValue: 8, resolution: 0.0054931640625, scale: 2308574.9457714846},
                    {level: 9, levelValue: 9, resolution: 0.00274658203125, scale: 1154287.4728857423},
                    {level: 10, levelValue: 10, resolution: 0.001373291015625, scale: 577143.73644287116},
                    {level: 11, levelValue: 11, resolution: 0.0006866455078125, scale: 288571.86822143558},
                    {level: 12, levelValue: 12, resolution: 0.00034332275390625, scale: 144285.93411071779},
                    {level: 13, levelValue: 13, resolution: 0.000171661376953125, scale: 72142.967055358895},
                    {level: 14, levelValue: 14, resolution: 8.58306884765625e-005, scale: 36071.483527679447},
                    {level: 15, levelValue: 15, resolution: 4.291534423828125e-005, scale: 18035.741763839724},
                    {level: 16, levelValue: 16, resolution: 2.1457672119140625e-005, scale: 9017.8708819198619},
                    {level: 17, levelValue: 17, resolution: 1.0728836059570313e-005, scale: 4508.9354409599309},
                    {level: 18, levelValue: 18, resolution: 5.3644180297851563e-006, scale: 2254.4677204799655},
                    {level: 19, levelValue: 19, resolution: 2.68220901489257815e-006, scale: 1127.23386023998275},
                    {level: 20, levelValue: 2, resolution: 1.341104507446289075e-006, scale: 563.616930119991375}
                ]
            })

            let layer = new WebTileLayer({
                "urlTemplate": "http://{subDomain}.tianditu.com/DataServer?T=vec_c&x={col}&y={row}&l={level}&tk=1e7e5c7c1a68a45bed395399ac106289",
                subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                id: 'tianDiTu_vec',
                copyright: '天地图',
                tileInfo: tileInfo,
                spatialReference: {wkid: 4490}//重点在这一句,如果不指定,那么默认为102100,在前端就会报坐标系的错误
            });
            getTDTUrl(esriRequest, "http://120.40.102.239:9650/fjmap/img_fj/wmts?request=GetCapabilities&version=1.0.0&service=WMTS").then(urlTemplate => {
                // getTDTUrl(esriRequest,"https://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetCapabilities&VERSION=1.0.0&tk=1e7e5c7c1a68a45bed395399ac106289").then(urlTemplate=>{
                let layer1 = new WebTileLayer({
                    urlTemplate: urlTemplate,
                    tileInfo: tileInfo,
                    spatialReference: {wkid: 4490},//重点在这一句,如果不指定,那么默认为102100,在前端就会报坐标系的错误
                    id: 'tiandituasd',
                    copyright: '天地图'
                });
                var map = new Map({
                    layers: [layer, layer1]
                });
                var view = new MapView({
                    container: "map",
                    map: map,
                    spatialReference: {
                        wkid: 4490
                    },
                    center: new Point({
                        x: 119.28,
                        y: 26.08,
                        spatialReference: 4490
                    }),
                    zoom: 10,
                });
                view.when(function(){
                    var layer_mark = WebTileLayer('http://{subDomain}.tianditu.com/DataServer?T=cva_c&x={col}&y={row}&l={level}&tk=174705aebfe31b79b3587279e211cb9a', {
                        subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                        tileInfo: tileInfo,
                        maxScale: 500000,
                        minScale: 0,
                        spatialReference: {wkid: 4490}//重点在这一句,如果不指定,那么默认为102100,在前端就会报坐标系的错误
                    });

                    var tile_layer = new TileLayer({
                        url: "http://120.40.102.239:9651/arcgis/rest/services/Vector_CGCS2000/MapServer",
                        maxScale: 500,
                        minScale: 500000,
                    });
                    map.addMany([tile_layer, layer_mark]);
                })
                window.hideLayer = function (visible) {
                    layer.visible = visible;
                }
            });
        });


</script>
</body>
</html>
